<template>
  <div id="loginContainer">
    <Card class='loginCard animated fadeInUp'>
      <h2 slot="title" class="loginCard-title">{{ $t('login.title') }}</h2>
      <Input placeholder="TMI (TMI purchase)P(Supplier)ADMIN" v-model="admin.usermail" class="loginInput" size="large">
        <span slot="prepend">
          <Icon :size="20" type="ios-person"></Icon>
        </span>
      </Input>
      <Input placeholder="123456" v-model="admin.password" type="password" class="loginInput"
             @on-enter="handleLogin" size="large">
        <span slot="prepend">
          <Icon :size="20" type="md-lock"></Icon>
        </span>
      </Input>
<!--      <div class="loginCard-extModule">-->
<!--        <RadioGroup v-model="lang" type="button" @on-change="ChangeLang">-->
<!--          <Radio :label="lang" v-for="(lang,index) in $store.state.langs" :key="index"></Radio>-->
<!--        </RadioGroup>-->
<!--      </div>-->
      <Checkbox v-model="check" class="loginInput">Remember password</Checkbox>
      <Button type="primary" long class="loginBtn" @click="handleLogin" :loading="loading">{{ $t('login.login') }}</Button>
    </Card>
  </div>
</template>

<script>
  import util from '@/util/toast'

  export default {
    name: 'loginContainer',
    data() {
      return {
        check: false,
        loading: false,
        lang:"zh",
        admin: {
          usermail: "",
          password: "",
        },
        noInput: false,
        pwdInput: false,
        remember: false,
      }
    },
    methods: {
      handleLogin() {
        this.loading = true
        let $params = {
          params:this.admin
        };
        this.$axios.get('S_Verifyuser.asp', $params).then((res) => {
          let $info = res.data;
          util.toast(this,$info,"登录");
          if ($info.code == 0 ){
            if (this.check){
              this.$store.commit('setAccount',this.admin)
            }
            this.$store.commit('setUserInfo',$info.data[0])
            this.loading = false
            this.$router.push({name:"Main"})
          }else{
            this.loading = false
          }
        });
      },
      ChangeLang(lang){
        this.$i18n.locale = lang
      }
    },
    mounted() {
      let $account = localStorage.getItem('account')
      if ($account){
        $account = eval("(" + $account + ")")
        console.log($account.usermail)
        this.check = true
        this.admin.usermail = $account.usermail
        this.admin.password = $account.password
      }

      //获取当前浏览器语言
      // let local_lang =  navigator.language
      //获取存储仓语言
      // let store_lang = this.$store.state.langs
      //判断当前浏览器语言是否在 存储仓语言中
      // let flag = false
      // store_lang.forEach((val,index)=>{
      //   if(val == local_lang){
      //     flag = true
      //     this.$i18n.locale = val
      //   }
      // })
      // if(!flag){
      //   this.$i18n.locale = 'en-US'
      // }
    }
  };
</script>

<style lang="less" scoped>
  #loginContainer {
    background-image: url(../assets/img/loginbg.jpg);
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .loginCard {
      margin-right: 100px;
      width: 450px;
      padding: 20px 0;
      border-radius: 10px;
      background: rgba(255, 255, 255, .7);

      &-title {
        text-align: center;
      }

      &-extModule {
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
      }

      .loginInput {
        margin: 10px 0;
      }

      .loginBtn {
        margin: 15px 0px;
      }
    }
  }
</style>
